<!DOCTYPE html>
<html lang="en">

  <head>
    <title>The Travelling Kiwi</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="script.js"></script>
  </head>

<body>

<!-- NAVIGATION -->

  <!-- Navbar -->
  <div class="navbar-wrapper">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">

  <!-- Logo and Hamburger-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
         <a href="#" class="navbar-brand">THE TRAVELLING KIWI</a>
    </div>
    </div>

  <!-- Menu Items -->
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="./about.html">About</a></li>
     <li><a href="./contact.html">Contact</a></li>

  <!-- Drop down menu 1-->

       <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Destinations <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#">Africa</a></li>
           <li><a href="#">Asia</a></li>
           <li><a href="#">Australia</a></li>
           <li><a href="#">Europe</a></li>
           <li><a href="#">North America</a></li>
           <li><a href="#">South America</a></li>
           </ul>
        </li>

  <!-- Drop down menu 2-->

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">How to London <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Before You Go</a></li>
              <li><a href="#">When You Get Here</a></li>
              <li><a href="#">101 Things To Do</a></li>
              <li><a href="#">London Life</a></li>
              <li><a href="#">When You Leave</a></li>
              <li><a href="#">You're Home ... Now What?</a></li>
             </ul>
          </li>

          </ul>
  <!-- Buttons on right-->


    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>


    </div> <!-- Wrapper-->
  </nav> <!-- Inverse-->
</div> <!-- Container fluid-->


      <!-- Carousel -->
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
      </ol>

        <!-- Carousel items -->
      <div class="carousel-inner">
           <div class="active item">
           <img src="https://rawgit.com/helencodes/travel-website/master/img/Scotland960x600.png" alt="Scotland" class="img-responsive center-block">
           <div class="carousel-caption">
           <button type="button" class="btn btn-lg btn-danger">Scotland</button>
          <h3>Scotland is awesome.</h3>
           </div>
        </div>

        <div class="item">
           <img src="https://rawgit.com/helencodes/travel-website/master/img/Amalfi960x600.png" alt="Amalfi" class="img-responsive center-block">
           <div class="carousel-caption">
          <button type="button" class="btn btn-lg btn-danger">Amalfi</button>
        <h3>Oh yeah and Amalifi</h3>
          </div>
        </div>

        <div class="item">
           <img src="https://rawgit.com/helencodes/travel-website/master/img/Croatia960x600.png" alt="Croatia" class="img-responsive center-block">
           <div class="carousel-caption">
           <button type="button" class="btn btn-lg btn-danger">Croatia</button>
        <h3>Croatia is awesome too.</h3>
           </div>
        </div>

        <div class="item">
           <img src="https://rawgit.com/helencodes/travel-website/master/img/Tuscany960x600.png" alt="Tuscany" class="img-responsive center-block">
           <div class="carousel-caption">
           <button type="button" class="btn btn-lg btn-danger">Tuscany</button>
        <h3>and then Tuscany</h3>
           </div>
        </div>

        <div class="item">
           <img src="https://rawgit.com/helencodes/travel-website/master/img/Slovenia960x600.png" alt="Slovenia" class="img-responsive center-block">
      <div class="carousel-caption">
        <button type="button" class="btn btn-lg btn-danger">Slovenia</button>
        <h3>last but not least Slovenia.</h3>
           </div>
        </div>

    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
  </div>


<!-- BLOG HEADER AND CONTENT-->

<!-- Text-->
   <div class="container">

   <div class="page-header">
        <h1>The Travelling Kiwi</h1>
        <h2>Just another Kiwi in London ... </h2>
      </div>

      <div class="row">
      </div>

        <div class="col-md-8 blog-main">

          <div class="blog-post">
            <h3 class="blog-post-title">Blog post about something</h3>
            <p class="blog-post-meta">September 1, 2016</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur imperdiet justo sed gravida. Curabitur maximus gravida gravida. Integer in purus eu tellus pellentesque aliquet quis sit amet lectus. Aliquam erat volutpat. Nam tincidunt fringilla lobortis. Phasellus commodo semper sapien vestibulum vestibulum. Cras vitae imperdiet urna. Curabitur mattis eros purus, id venenatis ipsum fringilla in. Sed ex leo, rhoncus sit amet mauris et, porttitor cursus nibh. Curabitur aliquam eget quam in sodales. Pellentesque justo mauris, fermentum ut odio quis, rhoncus scelerisque augue. Ut enim nunc, hendrerit at ultrices a, ultricies dictum felis. Nam interdum facilisis nibh at dapibus.</p>

            <a onclick="" href="#" class="btn-link">More</a>
        </div>

           <div class="blog-post">
            <h3 class="blog-post-title">Blog post about something else</h3>
            <p class="blog-post-meta">August 1, 2016</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur imperdiet justo sed gravida. Curabitur maximus gravida gravida. Integer in purus eu tellus pellentesque aliquet quis sit amet lectus. Aliquam erat volutpat. Nam tincidunt fringilla lobortis. Phasellus commodo semper sapien vestibulum vestibulum. Cras vitae imperdiet urna. Curabitur mattis eros purus, id venenatis ipsum fringilla in. Sed ex leo, rhoncus sit amet mauris et, porttitor cursus nibh. Curabitur aliquam eget quam in sodales. Pellentesque justo mauris, fermentum ut odio quis, rhoncus scelerisque augue. Ut enim nunc, hendrerit at ultrices a, ultricies dictum felis. Nam interdum facilisis nibh at dapibus.</p>

            <a onclick="" href="#" class="btn-link">More</a>
        </div>


          <div class="blog-post">
            <h3 class="blog-post-title">Blog post about some other thing</h3>
            <p class="blog-post-meta">July 1, 2016</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur imperdiet justo sed gravida. Curabitur maximus gravida gravida. Integer in purus eu tellus pellentesque aliquet quis sit amet lectus. Aliquam erat volutpat. Nam tincidunt fringilla lobortis. Phasellus commodo semper sapien vestibulum vestibulum. Cras vitae imperdiet urna. Curabitur mattis eros purus, id venenatis ipsum fringilla in. Sed ex leo, rhoncus sit amet mauris et, porttitor cursus nibh. Curabitur aliquam eget quam in sodales. Pellentesque justo mauris, fermentum ut odio quis, rhoncus scelerisque augue. Ut enim nunc, hendrerit at ultrices a, ultricies dictum felis. Nam interdum facilisis nibh at dapibus.</p>

            <a onclick="" href="#" class="btn-link">More</a>
        </div>

    </div>


<!-- SIDE BAR-->

<!-- Profile-->
     <div class="col-md-3 col-sm-offset-1 blog-sidebar">
      <div class="sidebar-module sidebar-module-inset">
       <img class="img-thumbnail" src="https://rawgit.com/helencodes/travel-website/master/img/Helen-headshot-blog.jpg" alt="Helen">
        <br/>
       <div class="text-center">
        <a onclick="" href="https://twitter.com/helencodes" class="btn btn-social-icon btn-lg btn-twitter"><i class="fa fa-twitter"></i></a>
        <a onclick="" href="https://www.linkedin.com/in/helencodes" class="btn btn-social-icon btn-lg btn-linkedin"><i class="fa fa-linkedin"></i></a>
        <a onclick="" href="https://github.com/helencodes" class="btn btn-social-icon btn-lg btn-github"><i class="fa fa-github"></i></a>
           <p>I'm Helen, The Travelling Kiwi, living in London and taking on the world, one trip at a time.</p>
              <a href="#">My Last Trip</a><br />
              <a href="#">When You Get Here</a><br />
              <a href="#">101 Things To Do</a><br />
              <a href="#">London Life</a><br />
              <a href="#">When You Leave</a><br />
              <a href="#">You're Home ... Now What?</a>
            </div>
           </div>
        </div>


<!-- Form-->
  <div class="col-md-3 col-sm-offset-1 blog-sidebar">
    <div class="sidebar-module sidebar-module-inset">
        <div class="text-center">
        <p>Sign Up for Weekly Emails</p>
        </div>
      <form>
       <div class="form-group">
        <input type="text" class="form-control" placeholder="name"><br />
        <input type="text" class="form-control" placeholder="email">
       </div>
      </form>

       <div class="text-center">
       <button type="submit" class="btn btn-danger">Sign Up</button>
      </div>

    </div>
   </div>
  </div>



<!-- FOOTER-->

<!-- Pagination -->
<div class="col-md-12 blog-main">
<div class="text-center">
<ul class="pagination">
       <li class="disabled"><a href="#">«</a></li>
       <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
       <li><a href="#">»</a></li>
       </ul>
</div>
</div>


<!-- Jquery and Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
